<template>
  <div class="list-item" @mouseenter="dealWithShowDelete(true)" @mouseleave="dealWithShowDelete(false)"
       :style="{backgroundColor:bgColor}">
    <input type="checkbox" v-model="isChecked" ><label>{{ item.text }}</label>
    <button v-show="isShowDeleteButton" class="delete" @click="dealWithDelete">删除</button>
  </div>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      isShowDeleteButton: false,
      bgColor: "#fff",

    }
  },
  computed:{
    isChecked:{
      get(){
        return this.item.finished
      },

    }
  },

  methods: {
    dealWithShowDelete(isShow) {
      this.isShowDeleteButton = isShow;
      this.bgColor = isShow ? "#ddd" : "#fff"

    },
    dealWithDelete(){
      console.log("删除：",this.index)
      this.deleteItemAtIndex(this.index)
    }
  },
  props: {
    item: {
      type: Object,
      required: true
    },

    index:{
      type: Number,
      required: true
    },
    deleteItemAtIndex: {
      type: Function,
      required: true
    },
    setFinishedByIndex: {
      type: Function,
      required: true
    }
  }
}
</script>

<style scoped>
.delete {
  border: none;
  color: white;
  background-color: orange;
}

.delete:hover {
  border: none;
  color: white;
  background-color: red;
}
</style>